<template>
  <div class="page-container">
    <template v-if="!showDetail">
      <div class="top-container">
        <el-button type="primary" @click="handleNewTask" class="custom-button">新建任务</el-button>
        <div class="right-section">
          <el-select v-model="videoType" placeholder="图片类型" class="video-type custom-select" @change="handleTypeChange">
            <el-option label="图生图pro" value="ii_fangzhou" />
            <el-option label="文生图pro" value="ti_fangzhou" />
            <el-option label="图生图" value="image_to_images" />
            <el-option label="文生图" value="text_to_images" />
            <el-option label="拼图" value="type3" />
            <el-option label="手稿变图" value="graffiti_painting" />
            <el-option label="人像重绘" value="portrait_style_repainting" />
            <el-option label="图像修复" value="super_resolution_image" />
            <el-option label="海报生成" value="type7" />
          </el-select>
          <el-button type="success" @click="handlePublish" class="custom-button">发布</el-button>
          <el-button type="danger" @click="handleDelete" class="custom-button">删除</el-button>
          <el-popover placement="bottom" trigger="click" width="260">
            <div class="popover-download-row">
              <el-button type="primary" @click="handleDownloadToPC" size="small" class="download-btn">下载到电脑</el-button>
              <el-button type="success" @click="handleDownloadToMobile" size="small"
                class="download-btn">下载到手机</el-button>
            </div>
            <template #reference>
              <el-button type="warning" class="custom-button">下载</el-button>
            </template>
          </el-popover>
          <el-input v-model="searchText" placeholder="请输入搜索内容" class="search-input custom-input" :prefix-icon="Search"
            @keyup.enter="handleSearch" />
        </div>
      </div>
      <div class="content-wrapper">
        <div class="content-list">
          <el-row :gutter="24">
            <el-col :span="12" v-for="item in pageData" :key="item.id">
              <div class="card" @click="handleCardClick(item.id)">
                <div class="card-header">
                  <el-checkbox v-model="item.checked" @click.stop />
                  <span class="card-title">{{ item.title }}</span>
                  <span class="card-meta-info">{{ item.classify_name }} {{ item.addtime }}</span>
                </div>
                <div class="card-body">
                  <img :src="item.image_url" class="card-img" />
                  <div class="card-info">
                    <div class="card-count">
                      <span class="count">{{ item.success_count }}</span> 个
                      <div class="desc">成品总量</div>
                    </div>
                    <div class="card-meta">
                      <div>
                        <span class="count">{{ item.fb_num }}</span> 个
                        <div class="desc">已发布数量</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="pagination-bar">
          <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total"
            :page-size="pageSize" :current-page="currentPage" @size-change="handleSizeChange"
            @current-change="handlePageChange" :page-sizes="[10,20,50,100]" />
        </div>
      </div>
      <el-dialog v-model="showDeleteDialog" title="确认删除" width="300px" :close-on-click-modal="false">
        <span>确定要删除吗？</span>
        <template #footer>
          <el-button @click="showDeleteDialog = false">取消</el-button>
          <el-button type="danger" @click="handleConfirmDelete">确定</el-button>
        </template>
      </el-dialog>
      <MyDialog v-model="showMobileDownloadDialog" width="420px" @confirm="handleConfirm" title="请使用手机扫码下载">
        <div style="text-align:center; padding: 16px 0;">
          <img src="/pictureDownLoadPhone.png" alt="二维码" style="width:180px; height:180px;" />
        </div>
      </MyDialog>
    </template>
    <ProductPictureDetail v-else :video-id="selectedVideoId" @back="handleBack" />

    <!-- 发布设置弹窗 -->
    <MyDialog
        v-model="showPublishDialog"
        title="发布设置"
        width="600px"
        :modal="true"
        :close-on-click-modal="false"
        @confirm="handlePublishConfirm"
        @cancel="handlePublishCancel"
    >
      <div class="publish-form">
        <!-- 发布类型 -->
        <div class="form-section">
          <div class="section-label">发布类型</div>
          <div class="publish-type-buttons">
            <button
                :class="['type-btn', publishForm.publishType === 'douyin' ? 'active' : '']"
                @click="publishForm.publishType = 'douyin'"
            >
              抖音发布
            </button>
<!--            <button
                :class="['type-btn', publishForm.publishType === 'xiaohongshu' ? 'active' : '']"
                @click="publishForm.publishType = 'xiaohongshu'"
            >
              小红书发布
            </button>-->
          </div>
        </div>

        <!-- 活动名称 -->
        <div class="form-section">
          <div class="section-label">活动名称</div>
          <el-input
              v-model="publishForm.activityName"
              placeholder="请输入活动名称"
              class="form-input"
          />
        </div>

        <!-- 标题 -->
        <div class="form-section">
          <div class="section-label">标题</div>
          <el-input
              v-model="publishForm.title"
              type="textarea"
              :rows="2"
              placeholder="发布时标题会自动携带(数字人请手动录入)"
              class="form-input"
          />

        </div>

        <!-- 话题 -->
        <div class="form-section">
          <div class="section-label">话题</div>
          <el-input-tag
              v-model="publishForm.topic"
              placeholder="请输入话题，按回车添加"
              class="form-input"
          />
          <div class="form-tip">
            <el-icon><InfoFilled /></el-icon>
            一行代表一个话题
          </div>
        </div>

        <!-- 挂载 -->
        <div class="form-section" v-if="publishForm.publishType === 'douyin'">
          <div class="section-label">挂载</div>
          <div class="mount-buttons">
            <button
                :class="['mount-btn', publishForm.mount === 'none' ? 'active' : '']"
                @click="publishForm.mount = 'none'"
            >
              无
            </button>
            <button
                :class="['mount-btn', publishForm.mount === 'poi' ? 'active' : '']"
                @click="publishForm.mount = 'poi'"
            >
              POI地址/团购
            </button>
            <button
                :class="['mount-btn', publishForm.mount === 'miniprogram' ? 'active' : '']"
                @click="publishForm.mount = 'miniprogram'"
            >
              小程序
            </button>
          </div>
        </div>
        <!-- POI -->
        <div class="form-section" v-if="publishForm.publishType === 'douyin' && publishForm.mount === 'poi'">
          <div class="section-label">挂载内容</div>
          <div style="display: flex; gap: 8px; width: 100%;">
            <el-input v-model="publishForm.poi1" placeholder="请输入关键词" style="flex:1;" />
            <el-input v-model="publishForm.poi2" placeholder="请输入城市" style="flex:1;" />
            <el-button icon="el-icon-search" type="primary" @click="handleChooseCityKeyWord">搜索</el-button>
          </div>
          <div style="margin-top: 8px;">
            <el-select v-model="publishForm.poiSelect" placeholder="请选择" style="width: 100%;">
              <el-option v-for="item in cityData" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
        </div>
        <!-- 小程序 -->
        <div class="form-section" v-if="publishForm.publishType === 'douyin' && publishForm.mount === 'miniprogram'">
          <div class="section-label">挂载内容</div>
          <el-input v-model="publishForm.miniId" placeholder="例如：ttef91b112671b152ba ID" style="margin-bottom: 8px;" />
          <el-input v-model="publishForm.miniTitle" placeholder="请输入小程序标题" style="margin-bottom: 8px;" />
          <el-input v-model="publishForm.miniPath" placeholder="例如：path/pages/index" />
        </div>
        <!-- 数据获取 -->
        <div class="form-section" v-if="publishForm.publishType === 'douyin'">
          <div class="section-label">数据获取</div>
          <div class="data-acquisition-row">
            <el-switch
                v-model="publishForm.dataAcquisition"
                active-color="#409EFF"
            />
            <div class="form-tip">
              <el-icon><InfoFilled /></el-icon>
              打开数据获取后,需要用户确定授权
            </div>
          </div>
        </div>

        <!-- 随机图片数量 -->
        <div class="form-section">
          <div class="section-label">随机图片数量</div>
          <el-input-number
              v-model="publishForm.picnums"
              :min="0"
              :max="9999"
              class="scan-limit-input"
          />
        </div>

        <!-- 扫码数量限制 -->
        <div class="form-section">
          <div class="section-label">扫码数量限制</div>
          <el-input-number
              v-model="publishForm.scanCodeLimit"
              :min="0"
              :max="9999"
              class="scan-limit-input"
          />
        </div>
      </div>
    </MyDialog>

    <!-- 二维码显示弹窗 -->
    <MyDialog
        v-model="showQrCodeDialog"
        title="请扫码发布"
        width="600px"
        :modal="true"
        :close-on-click-modal="false"
        @confirm="handleQrCodeConfirm"
        @cancel="handleQrCodeConfirm"
    >
      <!-- 二维码显示区域 -->
      <div class="form-section" v-if="douyinQrCode || redBookAndroidQrCode || redBookIOSQrCode">
        <div class="qr-code-container">
          <!-- 抖音二维码 -->
          <div v-if="douyinQrCode" class="qr-code-item">
            <div class="qr-code-title">抖音二维码</div>
            <img :src="douyinQrCode" alt="抖音二维码" class="qr-code-image" />
          </div>
          <!-- 小红书Android二维码 -->
          <div v-if="redBookAndroidQrCode" class="qr-code-item">
            <div class="qr-code-title">小红书Android二维码</div>
            <img :src="redBookAndroidQrCode" alt="小红书Android二维码" class="qr-code-image" />
          </div>
          <!-- 小红书iOS二维码 -->
          <div v-if="redBookIOSQrCode" class="qr-code-item">
            <div class="qr-code-title">小红书iOS二维码</div>
            <img :src="redBookIOSQrCode" alt="小红书iOS二维码" class="qr-code-image" />
          </div>
        </div>
      </div>
    </MyDialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import axiosUtil from '../../axios-util/axios-util'
import { Search, InfoFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import ProductPictureDetail from './ProductPictureDetail.vue'
import { useRouter } from "vue-router";
import MyDialog from '../common/MyDialog.vue'
import utils from '../../utils/utils';
import QRCode from 'qrcode'

//主题控制light  dark
//主题控制light  dark
const theme = utils.getTheme();
const website_bg_url = ref('')
const router = useRouter()

const videoType = ref('ii_fangzhou')
const searchText = ref('')

const total = ref(0)
const pageSize = ref(10)
const currentPage = ref(1)
const pageData = ref([])
const loading = ref(false)

const showDetail = ref(false)
const selectedVideoId = ref<number | null>(null)

const showDeleteDialog = ref(false)
const showMobileDownloadDialog = ref(false)

// 发布相关状态
const showPublishDialog = ref(false)
const showQrCodeDialog = ref(false)
const publishForm = ref({
  publishType: 'douyin', // douyin 或 xiaohongshu
  activityName: '',
  title: '',
  topic: [], // Changed to array for InputTag
  mount: 'none', // none, poi, miniprogram
  dataAcquisition: false,
  scanCodeLimit: 0,
  picnums: 0,
  // POI相关字段
  poi1: '',
  poi2: '',
  poiSelect: '',
  // 小程序相关字段
  miniId: '',
  miniTitle: '',
  miniPath: ''
})

const cityData = ref([])
const douyinQrCode = ref("")
const redBookAndroidQrCode = ref("")
const redBookIOSQrCode = ref("")

const fetchList = async () => {
  loading.value = true
  let url = ''
  let params = {}
  if (videoType.value === 'type3') {
    url = 'api/imagesplit/list'
    params = {
      id: "",
      offset: currentPage.value,
      type: 1,
      status: "",
      limit: pageSize.value,
      title: searchText.value
    }
  } else if (videoType.value === 'type7') {
    url = 'api/poster/list'
    params = {
      id: "",
      offset: currentPage.value,
      type: 1,
      status: "",
      limit: pageSize.value,
      title: searchText.value
    }
  } else {
    url = 'api/aliyun_tongyi/wan_xiang/image_task_list'
    params = {
      size: pageSize.value,
      page: currentPage.value,
      title: searchText.value,
      type: videoType.value || 'image_to_images',
    }
  }
  const response = await axiosUtil.post(url, params)
  loading.value = false
  if (response.data.code === 1) {
    if (videoType.value === 'type3') {
      pageData.value = response.data.data.rows
      total.value = response.data.data.total || 0
      pageData.value.forEach(item => {
        item.image_url = item.video_url_image
      })
    } else if (videoType.value === 'type7') {
      pageData.value = response.data.data.rows
      pageData.value.forEach(item => {
        item.image_url = item.video_url_image
      })
      total.value = response.data.data.total || 0
    } else {
      pageData.value = response.data.data.list
      total.value = response.data.data.total || 0
    }
  }
}

onMounted(() => {
  document.body.classList.remove('login-page')
  initWebsiteBgUrl()
  fetchList()
})

//读取配置，获取网站背景图
const initWebsiteBgUrl = async () => {
  const response = await axiosUtil.post('api/pc/site/get_agent_config', {})
  if (response.data.code === 0 && response.data.data) {
    website_bg_url.value = import.meta.env.VITE_APP_SERVER + response.data.data.website_bg || ''
  }
}

const handleNewTask = () => {
  router.push('/batchVideoBg')
}

const handlePublish = () => {
  // 检查是否有选中的项目
  const selectedItems = pageData.value.filter((item: any) => item.checked);
  if (selectedItems.length === 0) {
    ElMessage.warning('请先选择要发布的图片')
    return
  }
  showPublishDialog.value = true
}

const handleDelete = () => {
  showDeleteDialog.value = true
}

const handleConfirmDelete = async () => {
  showDeleteDialog.value = false
  const selectedItems = pageData.value.filter((item: any) => item.checked);
  const selectedIds = selectedItems.map((item: any) => item.id);
  // 这里的接口和参数请根据实际后端接口调整
  const response = await axiosUtil.post('api/aliyun_tongyi/wan_xiang/image_task_delete', {
    ids: selectedIds
  })
  if (response.data.code === 1) {
    ElMessage.success('删除成功')
  } else {
    ElMessage.error('删除失败：' + response.data.msg)
  }
  fetchList()
}

const handleDownloadToPC = async () => {
  // 获取所有选中项目
  const selectedItems = pageData.value.filter((item: any) => item.checked);

  if (selectedItems.length === 0) {
    ElMessage.warning('请先选择要下载的图片');
    return;
  }
  let arr = []
  // 获取选中项目的图片URL
  for (let item of selectedItems) {
    const response = await axiosUtil.post('api/aliyun_tongyi/wan_xiang/query_image_task', {
      id: item.id
    })
    if (response.data.data.list) {
      response.data.data.list.forEach(itemSon => {
        arr.push(itemSon.url)
      })
    }
  }
  if(arr){
    console.log(arr)

    // 显示下载进度
    ElMessage.info(`开始下载 ${arr.length} 个图片文件...`);

    // 使用更优雅的下载方法，避免新窗口闪烁
    for (let i = 0; i < arr.length; i++) {
      const imageUrl = arr[i];
      if (imageUrl) {
        try {
          // 使用当前时间作为文件名
          const now = new Date();
          const timestamp = now.getTime();
          const fileName = `image_${timestamp}_${i + 1}.jpg`;

          // 使用隐藏的 iframe 进行静默下载，完全避免新窗口
          const iframe = document.createElement('iframe');
          iframe.style.display = 'none';
          iframe.style.position = 'absolute';
          iframe.style.left = '-9999px';
          iframe.style.top = '-9999px';
          iframe.style.width = '1px';
          iframe.style.height = '1px';

          // 设置 iframe 的 src 来触发下载
          iframe.src = imageUrl;
          document.body.appendChild(iframe);

          // 延迟后移除 iframe，避免内存泄漏
          setTimeout(() => {
            if (document.body.contains(iframe)) {
              document.body.removeChild(iframe);
            }
          }, 2000);

          // 增加延迟时间，确保每个下载都能完成
          await new Promise(resolve => setTimeout(resolve, 1000));

          ElMessage.success(`已下载: ${fileName}`);
        } catch (error) {
          console.error('下载失败:', error);
          ElMessage.error(`下载失败: ${imageUrl}`);
        }
      }
    }

    if (arr.length > 0) {
      ElMessage.success(`批量下载完成，共 ${arr.length} 个图片`);
    }
  }
}

const handleDownloadToMobile = () => {
  showMobileDownloadDialog.value = true
}

const handleSizeChange = (size: number) => {
  pageSize.value = size
  currentPage.value = 1
  fetchList()
}
const handlePageChange = (page: number) => {
  currentPage.value = page
  fetchList()
}

// 搜索和筛选
const handleSearch = () => {
  currentPage.value = 1
  fetchList()
}
const handleTypeChange = () => {
  currentPage.value = 1
  fetchList()
}

const handleCardClick = async (id: number) => {
  selectedVideoId.value = id
  showDetail.value = true
}

const handleBack = () => {
  showDetail.value = false
  selectedVideoId.value = null
}

const handleConfirm = () => {
  showMobileDownloadDialog.value = false
}

// 发布相关方法
const handlePublishConfirm = async () => {
  console.log('发布设置确认', publishForm.value)
  const selectedItems = pageData.value.filter((item: any) => item.checked);
  if (selectedItems.length === 0) {
    ElMessage.warning('请先选择要发布的图片')
    return
  }

  let photos = ''
  let arr = []
  // 获取选中项目的图片URL
  for (let item of selectedItems) {
    const response = await axiosUtil.post('api/aliyun_tongyi/wan_xiang/query_image_task', {
      id: item.id
    })
    if (response.data.data.list) {
      response.data.data.list.forEach(itemSon => {
        arr.push(itemSon.url)
      })
    }
  }

  if (arr.length === 0) {
    ElMessage.warning('请先选择要发布的图片')
    return
  }

  photos = arr.join(",")

  // TODO: 在这里处理发布逻辑
  let url = ''
  let data: any = {
    "title": publishForm.value.activityName,
    "video_text": publishForm.value.title,
    "video_text_keyword": publishForm.value.topic,
    "platform_type": "none",
    "micro_app_info": {
      "micro_app_id": "",
      "micro_app_title": "",
      "micro_app_url": ""
    },
    "open_data": publishForm.value.dataAcquisition?1:0,
    "video_list": "",
    "max_release_num": publishForm.value.scanCodeLimit,
    "type": "images",
    "photos": photos,
    "photos_num": publishForm.value.picnums,
    "id": ""
  }

  if(publishForm.value.publishType === 'douyin'){
    url = 'api/scan_publish/douyin/save';
    // 处理POI挂载
    if(publishForm.value.mount === 'poi'){
      if(!publishForm.value.poiSelect){
        ElMessage.warning("请先选择数据")
        return
      }else {
        const selectArr = cityData.value.find(item => item.value === publishForm.value.poiSelect)
        if(selectArr){
          data.mount_type = 'poi'
          data.poi_id = selectArr.value
          data.poi_name = selectArr.label
        }
      }
    }

    // 处理小程序挂载
    if(publishForm.value.mount === 'miniprogram'){
      if(!publishForm.value.miniId){
        ElMessage.warning("请先输入小程序ID")
        return
      }
      if(!publishForm.value.miniTitle){
        ElMessage.warning("请先输入标题")
        return
      }
      if(!publishForm.value.miniPath){
        ElMessage.warning("请先输入路径")
        return
      }
      data.mount_type = 'mini_program'
      data.micro_app_info.micro_app_id = publishForm.value.miniId
      data.micro_app_info.micro_app_title = publishForm.value.miniTitle
      data.micro_app_info.micro_app_url = publishForm.value.miniPath
    }
  }else {
    url = 'api/scan_publish/xhs/save'
  }

  try {
    const response = await axiosUtil.post(url, data)
    if(response.data.code === 1) {
      ElMessage.success(response.data.msg)
      const qr_code = response.data.data.qr_code
      if(publishForm.value.publishType === 'douyin'){
        // 将地址转换为二维码图片
        douyinQrCode.value = await generateQRCode(qr_code)
      }else {
        // 将地址转换为二维码图片
        redBookAndroidQrCode.value = await generateQRCode(qr_code.android)
        redBookIOSQrCode.value = await generateQRCode(qr_code.ios)
      }
      showQrCodeDialog.value = true
      showPublishDialog.value = false
    }else {
      ElMessage.error(response.data.msg)
    }
  } catch (error) {
    ElMessage.error('发布失败')
  }
}

const handlePublishCancel = () => {
  showPublishDialog.value = false
  // 重置表单
  publishForm.value = {
    publishType: 'douyin',
    activityName: '',
    title: '',
    topic: [], // Reset to empty array for InputTag
    mount: 'none',
    dataAcquisition: true,
    scanCodeLimit: 0,
    picnums: 0,
    // POI相关字段
    poi1: '',
    poi2: '',
    poiSelect: '',
    // 小程序相关字段
    miniId: '',
    miniTitle: '',
    miniPath: ''
  }
}

const handleQrCodeConfirm = () =>{
  publishForm.value = {
    publishType: 'douyin',
    activityName: '',
    title: '',
    topic: [], // Reset to empty array for InputTag
    mount: 'none',
    dataAcquisition: true,
    scanCodeLimit: 0,
    picnums: 0,
    // POI相关字段
    poi1: '',
    poi2: '',
    poiSelect: '',
    // 小程序相关字段
    miniId: '',
    miniTitle: '',
    miniPath: ''
  }
  douyinQrCode.value = ""
  redBookAndroidQrCode.value = ""
  redBookIOSQrCode.value = ""
  showQrCodeDialog.value = false;
}

const handleChooseCityKeyWord = async () => {
  if(!publishForm.value.poi1){
    ElMessage.warning("请输入关键词")
    return
  }
  if(!publishForm.value.poi2){
    ElMessage.warning("请输入城市")
    return
  }
  const res = await axiosUtil.post('api/scan_publish/douyin/search_poi', {
    "keyword": publishForm.value.poi1,
    "city": publishForm.value.poi2
  })
  if(res.data.code){
    cityData.value = []
    res.data.code.forEach(item=>{
      const son = {
        value: item.poi_id,
        label: item.province  + item.city + item.district + item.address,
      }
      cityData.value.push(son)
    })
  }
}

// 生成二维码的函数
const generateQRCode = async (text: string): Promise<string> => {
  try {
    const qrCodeDataUrl = await QRCode.toDataURL(text, {
      width: 200,
      margin: 2,
      color: {
        dark: '#000000',
        light: '#FFFFFF'
      }
    })
    return qrCodeDataUrl
  } catch (error) {
    console.error('生成二维码失败:', error)
    return ''
  }
}
</script>

<style scoped>
.page-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  --el-text-color-regular: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
  --el-text-color-primary: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
  --el-fill-color-light: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.4)" : "rgba(255, 255, 255, 0.4)"');
}

.top-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.1)"');
  /* backdrop-filter: blur(10px); */
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.1)"');
  border-radius: 8px;
  box-shadow: 0 4px 6px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.3)"');
  position: relative;
  overflow: hidden;
  margin: 10px 20px;
}

.right-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.video-type {
  width: 120px;
}

.search-input {
  width: 200px;
}

/* 自定义按钮样式 */
.custom-button {
  /* background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"') !important;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
  color: #fff !important; */
  transition: all 0.3s ease !important;
}

.custom-button:hover {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"') !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.15)" : "rgba(255, 255, 255, 0.4)"') !important;
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.5)"') !important;
}

/* 自定义下拉框样式 */
.custom-select :deep(.el-input__wrapper) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.1)"') !important;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
  box-shadow: none !important;
}

.custom-select :deep(.el-input__inner) {
  color: #fff !important;
}

.custom-select :deep(.el-input__wrapper:hover) {
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.5)"') !important;
  box-shadow: 0 0 15px v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
}

/* 自定义输入框样式 */
.custom-input :deep(.el-input__wrapper) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.1)"') !important;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"') !important;
  box-shadow: none !important;
}

.custom-input :deep(.el-input__inner) {
  color: #fff !important;
}

.custom-input :deep(.el-input__wrapper:hover) {
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.5)"') !important;
  box-shadow: 0 0 15px v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"') !important;
}

/* 下拉选项样式 */
:deep(.el-select-dropdown) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.95)" : "rgba(255, 255, 255, 0.95)"') !important;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.1)"') !important;
  backdrop-filter: blur(10px);
}

:deep(.el-select-dropdown__item) {
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "rgba(255, 255, 255, 0.8)"') !important;
}

:deep(.el-select-dropdown__item.hover),
:deep(.el-select-dropdown__item:hover) {
  background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(255, 255, 255, 0.1)"') !important;
  color: v-bind('theme === "light" ? "#000" : "#fff"') !important;
}

:deep(.el-select-dropdown__item.selected) {
  background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.2)" : "rgba(255, 255, 255, 0.2)"') !important;
  color: v-bind('theme === "light" ? "#000" : "#fff"') !important;
}

.content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0 20px 10px;
  min-height: 0;
  overflow: hidden;
}

.content-list {
  flex: 1;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.1)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.1)"');
  border-radius: 12px;
  box-shadow: 0 0 20px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.08)" : "rgba(255, 255, 255, 0.2)"');
  padding: 24px;
  overflow-y: auto;
  margin-bottom: 10px;
}

/* 自定义滚动条样式 */
.content-list::-webkit-scrollbar {
  width: 6px;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.3)"');
}

.content-list::-webkit-scrollbar-thumb {
  background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.3)" : "linear-gradient(180deg, rgba(0, 255, 255, 0.2), rgba(0, 255, 255, 0.4), rgba(0, 255, 255, 0.2))"');
  border-radius: 3px;
  border: 1px solid v-bind('theme === "light" ? "rgba(0, 0, 0, 0.3)" : "rgba(255, 255, 255, 0.3)"');
  box-shadow: 0 0 10px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.2)" : "rgba(255, 255, 255, 0.2)"');
}

.content-list::-webkit-scrollbar-thumb:hover {
  background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.4)" : "linear-gradient(180deg, rgba(0, 255, 255, 0.3), rgba(0, 255, 255, 0.5), rgba(0, 255, 255, 0.3))"');
  box-shadow: 0 0 15px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.3)" : "rgba(0, 255, 255, 0.3)"');
}

.content-list::-webkit-scrollbar-track {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
  border-radius: 3px;
  border: 1px solid v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(255, 255, 255, 0.1)"');
}

.card {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.1)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.1)"');
  border-radius: 10px;
  margin-bottom: 24px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 10px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.08)" : "rgba(255, 255, 255, 0.2)"');
  transition: all 0.3s ease;
  cursor: pointer;
}

.card:hover {
  box-shadow: 0 0 24px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.18)" : "rgba(255, 255, 255, 0.3)"');
  transform: translateY(-2px);
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.4)" : "rgba(255, 255, 255, 0.2)"');
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 8px;
}

.card-title {
  font-weight: bold;
  color: v-bind('theme === "light" ? "#000" : "#fff"');
  font-size: 1.1em;
}

.card-meta-info {
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.6)" : "#b2ebf2"');
  font-size: 0.9em;
  margin-left: auto;
}

.card-body {
  display: flex;
  align-items: center;
}

.card-img {
  width: 100px;
  height: 70px;
  object-fit: cover;
  border-radius: 6px;
  margin-right: 18px;
  border: 1px solid v-bind('theme === "light" ? "rgba(0, 0, 0, 0.15)" : "rgba(255, 255, 255, 0.15)"');
}

.card-info {
  flex: 1;
  display: flex;
  justify-content: space-between;
}

.card-count,
.card-meta {
  color: v-bind('theme === "light" ? "#000" : "#fff"');
  font-size: 1em;
}

.count {
  color: v-bind('theme === "light" ? "#409EFF" : "#00ffff"');
  font-weight: bold;
  font-size: 1.2em;
}

.desc {
  font-size: 0.85em;
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.6)" : "#b2ebf2"');
}

.pagination-bar {
  padding: 10px 20px;
  display: flex;
  justify-content: flex-end;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.1)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.1)"');
  border-radius: 12px;
  box-shadow: 0 0 20px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.08)" : "rgba(255, 255, 255, 0.2)"');
}

/* 分页器样式 */
:deep(.el-pagination) {
  --el-pagination-bg-color: transparent;
  --el-pagination-button-color: v-bind('theme === "light" ? "#000" : "#fff"');
  --el-pagination-button-disabled-color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.3)" : "rgba(255, 255, 255, 0.3)"');
  --el-pagination-hover-color: v-bind('theme === "light" ? "#409EFF" : "#00ffff"');
}

:deep(.el-pagination .el-pagination__total) {
  color: v-bind('theme === "light" ? "#000" : "#fff"');
}

:deep(.el-pagination .el-pagination__jump) {
  color: v-bind('theme === "light" ? "#000" : "#fff"');
}

:deep(.el-pagination .el-pager li) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"');
  color: v-bind('theme === "light" ? "#000" : "#fff"');
}

:deep(.el-pagination .el-pager li.active) {
  background: v-bind('theme === "light" ? "#409EFF" : "#00ffff"');
  color: v-bind('theme === "light" ? "#fff" : "#000"');
}

:deep(.el-pagination .el-pager li:hover) {
  color: v-bind('theme === "light" ? "#409EFF" : "#00ffff"');
}

.popover-download-row {
  display: flex;
  flex-direction: row;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

.download-btn {
  flex: 1 1 0;
  min-width: 100px;
}

/* 发布设置弹窗样式 */
.publish-form {
  padding: 20px;
}

.form-section {
  margin-bottom: 24px;
}

.section-label {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

.publish-type-buttons {
  display: flex;
  gap: 12px;
}

.type-btn {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid #dcdfe6;
  background: #fff;
  color: #606266;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
}

.type-btn:hover {
  border-color: #409eff;
  color: #409eff;
}

.type-btn.active {
  background: #409eff;
  border-color: #409eff;
  color: #fff;
}

.form-input {
  width: 100%;
}

.form-tip {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

.mount-buttons {
  display: flex;
  gap: 12px;
}

.mount-btn {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  background: #fff;
  color: #606266;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 12px;
}

.mount-btn:hover {
  border-color: #409eff;
  color: #409eff;
}

.mount-btn.active {
  background: #409eff;
  border-color: #409eff;
  color: #fff;
}

.data-acquisition-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.scan-limit-input {
  width: 120px;
}

/* 二维码显示样式 */
.qr-code-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 10px;
}

.qr-code-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.qr-code-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  text-align: center;
}

.qr-code-image {
  width: 150px;
  height: 150px;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  padding: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>
